<template>
  <div id='app'>
      <div class="action">
   <p >手机号:<input type="tel"  v-model="tel" placeholder="请输入手机号" :class="{po:teld}"><span v-show="teld" class="teld">手机号错误!!</span></p>
  
      <p>验证码:<input type="input"  v-model="number" placeholder="请输入验证码"></p>
      <button @click="fs" v-show="yzm">发送验证码</button>
      <button v-show="!yzm">倒计时<van-count-down :time="time" format=" ss 秒"  /></button>
    
      <van-button disabled type="primary" size="small" v-show="yzm">登录</van-button>
      <van-button  type="primary" size="small" v-show="!yzm" @click="tz">登录</van-button>
      </div>
   

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      tel:'',
      number:'',
      teld:false,
      yzm:true,
      time:62000
      
    }
  },
  methods: {
      fs(){
        var tele=  /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
          if(this.tel==''){
              alert('手机号为空')
              return 
          }
          
          if(tele.test(this.tel)){
            
              this.teld=false
              this.yzm=false
              
          }else{
            //   alert('手机号错误');
              this.teld=true
          }
      },
      tz(){
          if(this.number.length>0){
              this.$router.push('about')
          }else{
              alert('请输入验证码')
          }

      }

  },
  mounted() {

  },
  components: {

  },
  computed: {
      num2(){
         
           var time = 5;
     setInterval(function() {
        time--;
        if(time==0){
            this.yzm=true

        }
    }, 1000);
    return time
  
         

      }
  },
}
</script>

<style lang='scss'>

.action{
    width: 100%;
    height: 200px;
    margin-left:20% ;
    margin-top:40% ;

    
}
.po{
    border: 2px solid red;
}
.teld{
    color: red;
}

</style>
